import { useState } from "react"
import CenterListItem from "./CenterListItem.jsx"
import store from "../redux/store.js"
import { getList } from "../redux/action.js"

function CenterList(props) {
    let [listArr, setArr] = useState([])
    if(listArr.length == undefined) {
        setArr(store.getState().CenterMode.CenterList)
    }
    fetch(props.listUrl, {
        headers: {
            'token': store.getState().TokenMode.token
        }
    }).then(res => res.json()).then(res => {
        if (listArr.length == 0) {
            setArr(res.data)
            store.dispatch(getList(res.data))
        }
    })

    return (
        <div>
            <ul>
                {
                    listArr.map((item, index) => (
                        <li className="listItem" key={index}>
                            <CenterListItem flag={props.flag} data={item}></CenterListItem>
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}

export default CenterList